<template>
	<view>
		<!-- 输入框，用于显示选中的年月 -->
		<view class="" @click="handlePicker">
			<view class="down-menu">
				<text>{{ currentDate }}</text>
				<image src="/static/images/index/down.png" class="width-12 height-12" mode=""></image>
			</view>
		</view>

		<!-- 弹出层 -->
		<Popup :show.sync="showPopup" title="选择年月">
			<view class="">
				<!-- 年月选择器 -->
				<view class="p-tb16">
					<van-picker :columns="columns" @change="handlePickerChange" />
				</view>
				<view class="self-btn full-width" @click="handleConfirm">
					<text>确定</text>
				</view>
			</view>
		</Popup>
	</view>
</template>

<script>
	import dayjs from 'dayjs';
	import Popup from "@/components/popup/index.vue"

	export default {
		props: {
			// 双向绑定的值
			value: {
				type: [String],
				default: ''
			}
		},
		components: {
			Popup
		},
		data() {
			const currentDate = dayjs(); // 当前日期
			const currentYear = currentDate.year(); // 当前年
			const currentMonth = currentDate.month() + 1; // 当前月

			return {
				showPopup: false, // 控制弹出层的显示
				columns: [], // 年月选择器的数据
				currentValue: this.value || `${currentYear}-${currentMonth}`, // 当前选中的年月
				currentDate: this.value || `${currentYear}年${currentMonth}月` // 显示的年月
			};
		},
		watch: {
			// 监听外部传入的 value 值变化
			value: {
				immediate: true,
				handler(val) {
					if (val) {
						this.currentValue = val;
						this.currentDate = dayjs(val).format('YYYY年MM月');
						this.generateColumns();
					}
				}
			}
		},
		methods: {
			handlePickerChange(picker) {
				let {detail:{value}} = picker
				const selectedYear = value[0].replace('年', ''); // 去掉“年”字
				const selectedMonth = value[1].replace('月', ''); // 去掉“月”字
				this.currentValue = `${selectedYear}-${selectedMonth}`;
				
			},
			// 打开弹出层
			handlePicker() {
				this.generateColumns(); // 每次打开时重新生成数据
				this.showPopup = true;
			},
			// 生成年月选择器的数据
			generateColumns() {
				const currentDate = dayjs();
				const currentYear = currentDate.year();
				const currentMonth = currentDate.month() + 1;

				// 生成年份数据
				const years = [];
				for (let i = currentYear - 5; i <= currentYear; i++) {
					years.push(`${i}年`);
				}

				// 生成月份数据
				const months = [];
				for (let i = 1; i <= 12; i++) {
					months.push(`${i}月`);
				}

				// 设置默认选中的索引
				const selectedYear = dayjs(this.currentValue).year();
				const selectedMonth = dayjs(this.currentValue).month() + 1;
				const yearIndex = years.findIndex(item => item === `${selectedYear}年`);
				const monthIndex = months.findIndex(item => item === `${selectedMonth}月`);

				this.columns = [{
						values: years,
						defaultIndex: yearIndex,
					},
					{
						values: months,
						defaultIndex: monthIndex,
					},
				];
			},
			// 确认选择
			handleConfirm() {
				// const selectedYear = values[0].replace('年', ''); // 去掉“年”字
				// const selectedMonth = values[1].replace('月', ''); // 去掉“月”字
				// this.currentValue = `${selectedYear}-${selectedMonth}`;
				this.currentDate = dayjs(this.currentValue).format("YYYY年M月");
				this.$emit('input', this.currentValue); // 触发 input 事件，实现双向绑定
				this.$emit('change')
				this.showPopup = false; // 关闭弹出层
			}
		}
	};
</script>

<style scoped lang="scss">
	/* 自定义样式 */
	.down-menu {
		background: #FFFFFF;
		border-radius: 32rpx;
		// border: 1rpx solid #DDE0E6;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 400;
		font-size: 24rpx;
		color: #202020;
		line-height: 32rpx;
		padding: 16rpx 24rpx;

		&>image {
			margin-left: 14rpx;
		}
	}
</style>